<template>
	<view class="container">
		<u-navbar bgColor="#0065FF" leftIconColor="#fff" autoBack></u-navbar>
		<view class="content">
			<view class="login_card">
				<text class="title">登录</text>
				<text class="tips">输入您的账号与密码</text>
				<view ref="loginForm" :model="dataInfo" :rules="rules">
					<u-form-item prop="username">
						<u-input
							maxlength="11"
							prefixIconStyle="color:#c0c4cc;"
							prefixIcon="account"
							clearable
							placeholder="账号"
							border="bottom"
							v-model="dataInfo.username"
						></u-input>
					</u-form-item>
					<u-form-item prop="password">
						<u-input
							prefixIconStyle="color:#c0c4cc;"
							prefixIcon="lock"
							clearable
							type="password"
							placeholder="密码"
							border="bottom"
							v-model="dataInfo.password"
						></u-input>
					</u-form-item>
					<u-button color="#0065FF" :loading="loading" @click="onLogin" text="立即登录"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import WebsocketTask from '@/utils/websocket.js';
export default {
	data() {
		return {
			loading: false,
			dataInfo: {
				username: '',
				password: ''
			},
			rules: {
				username: {
					type: 'string',
					required: true,
					message: '请填写账号',
					trigger: ['blur', 'change']
				},
				password: {
					type: 'string',
					required: true,
					message: '请填写密码',
					trigger: ['blur', 'change']
				}
			}
		};
	},
	onLoad() {
		// const websocket = new WebsocketTask('ws://', 5000);
		// console.log(websocket);
		if (uni.getStorageSync('loginInfo')) {
			this.dataInfo = JSON.parse(uni.getStorageSync('loginInfo'));
		}
	},
	onShow() {
		uni.clearStorageSync();
	},
	methods: {
		onLogin() {
			this.$api.loginDo(this.dataInfo).then((response)=>{
				this.$store.dispatch('user/login', {
					access_token: response.token
				});
				this.$api.getUserInfo().then(res => {
					var user = res.user
					this.$store.commit('user/setUserInfo', user)
					uni.reLaunch({
						url: '/pages/tabbar/home/home',
					});
				})
			})
			return
			this.$refs.loginForm.validate().then(async (res) => {
				this.loading = true;
				const { code, data, msg } = await this.$api.authLogin(this.dataInfo);
				this.loading = false;
				if (code == 200) {
					uni.setStorageSync('loginInfo', JSON.stringify(this.dataInfo));
					uni.setStorageSync('token', data.access_token);
					switch (data.user_level_id) {
						case 1:
							uni.switchTab({
								url: '/pages/home/index'
							});
							break;
						case 2:
							uni.reLaunch({
								url: '/pages/record/index'
							});
							break;
						default:
							break;
					}
				} else {
					uni.$u.toast(msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
}

.content {
	background-color: #fff;
	padding-top: 300rpx;
	box-sizing: border-box;
	background-color: #0065ff;

	.login_card {
		height: calc(100vh - 300rpx);
		border-radius: 0 50rpx 0 0;
		padding: 60rpx 20rpx;
		box-sizing: border-box;
		color: #555;
		background-color: #fff;

		> text {
			display: block;
		}

		.title {
			font-size: 56rpx;
			font-weight: bold;
		}

		.tips {
			font-size: 24rpx;
			color: #c0c4cc;
			margin: 10rpx 0 40rpx 0;
		}

		// /deep/ .u-input:first-of-type {
		// 	margin-bottom: 40rpx;
		// }

		/deep/ .u-button {
			margin-top: 60rpx;
			border-radius: 20rpx;
		}
	}
}
</style>
